<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>影像卷帘</title>
    <script src="./CesiumSuperMap/Cesium.js" type="text/javascript"></script>
    <link rel="stylesheet" href="./CesiumSuperMap/Widgets/widgets.css" />
    <link href="./css/pertty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
    <!-- <script src="./js/config.js"></script> -->
</head>

<body>
    <div id="cesiumContainer">
        <div id="vertical-slider"></div>
        <div id="horizontal-slider" style="display: none;"></div>
    </div>
    <div id="tool-bar" class="param-container tool-bar">
        <div>
            <span>卷帘模式</span>
            <div style="padding: 0;margin: 0.5rem 0;">
                <div style="margin: 0.2rem 0;">
                    <label><input type="checkbox" id="use-roller" style="vertical-align: middle;" checked /><span
                            style="vertical-align: middle;">使用卷帘</span></label>
                </div>
                <div style="margin: 0.2rem 0;">
                    <label><input type="radio" name="roller-category" value="lr-roller"
                            checked /><span>左右卷帘</span></label>
                    <div style="text-indent: 1rem;" id="lr-roller-mode">
                        <label><input type="radio" name="roller-mode" value="left-roller"
                                style="vertical-align: middle;" checked /><span
                                style="vertical-align: middle;">屏蔽左侧</span></label>
                        <label><input type="radio" name="roller-mode" value="right-roller"
                                style="vertical-align: middle;" /><span
                                style="vertical-align: middle;">屏蔽右侧</span></label>
                    </div>
                </div>
                <div style="margin: 0.2rem 0;">
                    <label><input type="radio" name="roller-category" value="tb-roller" /><span>上下卷帘</span></label>
                    <div style="text-indent: 1rem; display: none;" id="tb-roller-mode">
                        <label><input type="radio" name="roller-mode" value="top-roller"
                                style="vertical-align: middle;" /><span
                                style="vertical-align: middle;">屏蔽上侧</span></label>
                        <label><input type="radio" name="roller-mode" value="bottom-roller"
                                style="vertical-align: middle;" /><span
                                style="vertical-align: middle;">屏蔽下侧</span></label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id='loadingbar' class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>

    <script>
        function onload(Cesium) {
            var viewer = new Cesium.Viewer('cesiumContainer', {
                baseLayerPicker: false,
                animation: false,
                fullscreenButton: false,
                vrButton: false,
                homeButton: false,
                sceneModePicker: false,
                timeline: false,
                navigationHelpButton: false,
                geocoder: false, //是否显示地名查找控件 
            });
            //去掉logo
            viewer.cesiumWidget.creditContainer.style.display = "none"
            var blackMarble = viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
                url: './img/BlackMarble_2012.jpg'
            }));
       
            let windowWidth = $('body').width(); // 窗口宽度
            let windowHeight = $('body').height(); // 窗口高度
            let rollerShutterConfig = { // 卷帘配置参数，以对象方式实现地址传递
                splitDirection: new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE), // 初始时屏蔽左侧
                verticalSplitPosition: windowWidth / 2,
                horizontalSplitPosition: windowHeight / 2,
                imageryLayers: [blackMarble], // 参与卷帘的影像图层数组
                latestSplitDirection: null // 用于在禁用卷帘后恢复之前的卷帘方向
            };
            initRollerShutter(viewer, rollerShutterConfig);
            $('#loadingbar').remove();
        }

        /**
         * 初始化卷帘。设置分割条初始位置及绑定相关事件。
         * @param viewer 。
         * @param rollerShutterConfig 卷帘配置参数。
         */
        function initRollerShutter(viewer, rollerShutterConfig) {
            setRollerShutterSplit(viewer, rollerShutterConfig);
            bindSliderEvt(viewer, rollerShutterConfig);
            $('input[type=radio][name="roller-mode"]').on('input propertychange', function () {
                let splitDirectionCustomStr = $('input[type=radio][name="roller-mode"]:checked').val();
                switch (splitDirectionCustomStr) {
                    case 'left-roller':
                        rollerShutterConfig.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE);
                        break;
                    case 'right-roller':
                        rollerShutterConfig.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE);
                        break;
                    case 'top-roller':
                        rollerShutterConfig.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.BOTTOM);
                        break;
                    case 'bottom-roller':
                        rollerShutterConfig.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.TOP);
                        break;
                    default:
                        break;
                }
                setRollerShutterSplit(viewer, rollerShutterConfig);
            });

            // 在 “左右模式” 和 “上下模式” 之间切换
            $('input[type=radio][name="roller-category"]').on("input propertychange", function () {
                let splitDirectionCategory = $('input[type=radio][name="roller-category"]:checked').val();
                let verticalSlider = document.getElementById('vertical-slider');
                let horizontalSlider = document.getElementById('horizontal-slider');
                switch (splitDirectionCategory) {
                    case 'lr-roller':
                        verticalSlider.style.display = 'block';
                        horizontalSlider.style.display = 'none';
                        $("#lr-roller-mode").css("display", "block");
                        $("#tb-roller-mode").css("display", "none");
                        rollerShutterConfig.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE);
                        $("input[type=radio][value='left-roller']").prop("checked", "checked");
                        break;
                    case 'tb-roller':
                        verticalSlider.style.display = 'none';
                        horizontalSlider.style.display = 'block';
                        $("#lr-roller-mode").css("display", "none");
                        $("#tb-roller-mode").css("display", "block");
                        rollerShutterConfig.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.BOTTOM);
                        $("input[type=radio][value='top-roller']").prop("checked", "checked");
                        break;
                    default:
                        break;
                }
                setRollerShutterSplit(viewer, rollerShutterConfig);
            });

            // 是否使用卷帘
            $("#use-roller").on("input propertychange", function () {
                let verticalSlider = document.getElementById('vertical-slider');
                let horizontalSlider = document.getElementById('horizontal-slider');
                if ($(this).prop("checked")) {
                    if (rollerShutterConfig.latestSplitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE)) ||
                        rollerShutterConfig.latestSplitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE))) {
                        verticalSlider.style.display = 'block';
                        horizontalSlider.style.display = 'none';
                    } else {
                        verticalSlider.style.display = 'none';
                        horizontalSlider.style.display = 'block';
                    }
                    rollerShutterConfig.splitDirection = rollerShutterConfig.latestSplitDirection;
                } else {
                    rollerShutterConfig.latestSplitDirection = rollerShutterConfig.splitDirection;
                    rollerShutterConfig.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.NONE);
                    verticalSlider.style.display = 'none';
                    horizontalSlider.style.display = 'none';
                }
                setRollerShutterSplit(viewer, rollerShutterConfig);
            });
        }

        /**
         * 注册卷帘分割条的拖拽事件。
         * @param viewer。
         * @param rollerShutterConfig 卷帘配置参数。
         */
        function bindSliderEvt(viewer, rollerShutterConfig) {
            let verticalSlider = document.getElementById('vertical-slider'); // 垂直分割条
            let horizontalSlider = document.getElementById('horizontal-slider'); // 水平分割条
            verticalSlider.addEventListener('mousedown', mouseDown, false);
            horizontalSlider.addEventListener('mousedown', mouseDown, false);
            let windowHeight = $('body').height();
            document.addEventListener('mouseup', mouseUp, false);
            function mouseUp(e) {
                document.removeEventListener('mousemove', sliderMove, false);
            }
            function mouseDown(e) {
                document.addEventListener('mousemove', sliderMove, false);
            }
            function sliderMove(e) { // 鼠标拖拽时执行
                // 解决拖拽鼠标粘滞的问题
                if (e.preventDefault) {
                    e.preventDefault();
                } else {
                    e.returnValue = false;
                }
                if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE))
                    || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE))) {
                    verticalSlider.style.left = e.clientX + 'px';
                    rollerShutterConfig.verticalSplitPosition = e.clientX;
                } else if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.TOP))
                    || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.BOTTOM))) {
                    let clientY = e.clientY;
                    if (clientY < 0) {
                        clientY = 0;
                    } else if (clientY > windowHeight) {
                        clientY = windowHeight - $('#horizontal-slider').height();
                    }
                    horizontalSlider.style.top = clientY + 'px';
                    rollerShutterConfig.horizontalSplitPosition = windowHeight - clientY;
                }
                setRollerShutterSplit(viewer, rollerShutterConfig);
            }
        }

        /**
         * 初始化卷帘。设置分割条初始位置及绑定相关事件。
         * @param scene 场景。
         * @param rollerShutterConfig 卷帘配置参数。
         */
        function setRollerShutterSplit(viewer, rollerShutterConfig) {
            let splitPosition = null;
            if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE))
                || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE))) {
                splitPosition = rollerShutterConfig.verticalSplitPosition;
            } else if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.TOP))
                || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.BOTTOM))) {
                splitPosition = rollerShutterConfig.horizontalSplitPosition;
            }
            for (var imageryLayer of rollerShutterConfig.imageryLayers) {
                imageryLayer.splitDirection = rollerShutterConfig.splitDirection;
            }
            if (splitPosition) { // 如果禁用卷帘就没有必要设置分割位置
                if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE))
                    || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE))) {
                    viewer.scene.imagerySplitPosition.x = splitPosition / $("body").width();
                } else if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.TOP)) ||
                    rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.BOTTOM))) {
                    viewer.scene.imagerySplitPosition.y = splitPosition / $("body").height();
                }
            }
        }
        
        if (typeof Cesium !== 'undefined') {
            window.startupCalled = true;
            onload(Cesium);
        }
    </script>
</body>

</html>